<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url(images/bg.png);
            background-repeat: no-repeat;
        }

        .main-box {
            width: 400px;
            background-color: rgba(255, 255, 255, 0.7);
            border-radius: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px 30px;
        }
    </style>
</head>
<body>
<div class="main-box">
    <h2 class="text-center">医疗管理系统</h2>
    <!--  ctrl + k 格式化代码 -->
    <form class="form-horizontal" id="login" action="">
        <div class="form-group">
            <label for="username" class="col-sm-3 control-label">用户名</label>
            <div class="col-sm-9">
                <div class="input-group">
							<span class="input-group-addon" id="basic-addon1">
								<i class="glyphicon glyphicon-user"></i>
							</span>
                    <input type="text" id="username" class="in form-control" placeholder="请输入用户名">
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="pwd" class="col-sm-3 control-label">密码</label>
            <div class="col-sm-9">
                <div class="input-group">
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-lock"></i>
							</span>
                    <input id="pwd" type="password" class="in form-control" placeholder="请输入密码">
                    <span class="glyphicon form-control-feedback" style="padding-right: 62px;"
                          aria-hidden="true"></span>
                    <span class="input-group-addon" id="btn-eye">
								<i class="glyphicon glyphicon-eye-close"></i>
							</span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="pwd2" class="col-sm-3 control-label">确认密码</label>
            <div class="col-sm-9">
                <div class="input-group">
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-lock"></i>
							</span>
                    <input id="pwd2" type="password" class="in form-control" placeholder="请确认密码">
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="code" class="col-sm-3 control-label">账户</label>
            <div class="col-sm-9">
                <div class="input-group">
							<span class="input-group-addon">
								<i class="	glyphicon glyphicon-book"></i>
							</span>
                    <input id="code" type="text" class="in form-control" placeholder="请输入账户">
                    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="dep" class="col-sm-3 control-label">科室</label>
            <div class="col-sm-9">
                <div class="input-group">
							<span class="input-group-addon">
								<i class="	glyphicon glyphicon-folder-open"></i>
							</span>
                    <select id="dep" class="form-control">
                        <option value="1">外科</option>
                        <option value="2">内科</option>
                        <option value="3">耳鼻喉科</option>
                        <option value="4">妇科</option>
                        <option value="5">儿科</option>
                        <option value="6">脑科</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="text-center col-sm-12">
                <button id="register_btn" type="button" class="btn btn-primary">注册</button>
                <a href="index.html" id="login_btn" type="button" class="btn btn-success">登录</a>
            </div>
        </div>
    </form>
</div>

<script>
    $(".in").blur(function () {
        var code = $(this).val().trim();
        if ($(this).attr("id") == "pwd2"){
            if (code != $("#pwd").val()){
                alert("两次密码不一致");
                $(this).parent().addClass("has-error");
                $(this).parent().removeClass("has-success");
                $(this).next().addClass("glyphicon-remove");
                $(this).next().removeClass("glyphicon-ok");
                return false;
            }
        }
        if ("" == code) {
            $(this).parent().addClass("has-error");
            $(this).parent().removeClass("has-success");
            $(this).next().addClass("glyphicon-remove");
            $(this).next().removeClass("glyphicon-ok");
        } else {
            $(this).parent().addClass("has-success");
            $(this).parent().removeClass("has-error");
            $(this).next().removeClass("glyphicon-remove");
            $(this).next().addClass("glyphicon-ok");
        }
        $(this).val(code);
    });
    var a = false;
    $("#btn-eye").click(function () {
        if (a) {
            $(this).children().addClass("glyphicon-eye-close");
            $(this).children().removeClass("glyphicon-eye-open");
            $("#pwd").attr("type", "password");
            a = false;
        } else {
            $(this).children().addClass("glyphicon-eye-open");
            $(this).children().removeClass("glyphicon-eye-close");
            $("#pwd").attr("type", "text");
            a = true;
        }
    });
    $("#register_btn").click(function () {
        var username = $("#username").val();
        var code = $("#code").val();
        var dep = $("#dep").val();
        var pwd = $("#pwd").val();
        var pwd2 = $("#pwd2").val();
        if (username == "" || pwd == "" || code == "" || dep == "" || pwd2 == "") {
            alert("不能为空");
            return false;
        }
        $.post("register", {
            username:username,
            code:code,
            dep:dep,
            pwd:pwd,
            pwd2:pwd2
        }, function (data) {
            if (data) {
                alert("注册成功");
                window.location.href="index.html";
            } else {
                alert("注册失败");
            }
        });
    });
</script>
</body>
</html>
